<template>
  <div>
    <w-nav-bar
      title="技能详情"/>
    <div class="content">
      <h1 class="title">{{ title }}</h1>
      <p
        class="cell"
        v-for="(v, k) in dataArr"
        :key="k">{{ v }}</p>
    </div>
  </div>
</template>

<script>
import MeModel from '@/models/web/MeModel'
export default {
  name: 'MeJiNengDetail',
  data () {
    return {
      /**
       * 个人模型数据
       */
      meModel: new MeModel()
    }
  },
  computed: {
    /**
     * 技能数组
     * @returns {Array}
     */
    dataArr () {
      try {
        const type = this.$route.params.type
        return this.meModel[`${type}Show`].split('\n')
      } catch (e) {
        return []
      }
    },
    /**
     * 标题
     * @returns {string}
     */
    title () {
      const type = this.$route.params.type
      switch (type) {
        case 'ios':
          return 'iOS'
        case 'xcx':
          return '微信小程序'
        case 'node':
          return 'Node.js'
        case 'web':
          return 'Web前端'
        default :
          return 'Java'
      }
    }
  },
  methods: {
    /**
     * 获取所有的数据
     */
    getMeData () {
      this.meModel.getModel().w_then()
    }
  },
  mounted () {
    this.getMeData()
  }
}
</script>

<style lang="scss" scoped>
  .content {
    >.title {
      font-size: 20px;
      text-align: center;
      color: #ef4f4f;
    }
    >.cell {
      font-size: 16px;
      line-height: 24px;
      color: #666;
      margin: 10px 0;
    }
    padding: 0 10px;
  }

</style>
